<template>
  <div class="base_editor">

    <header class="header">教师风采编辑页</header>

    
    <Row>
      <Col span="2">*
      </Col>
      <Col span="20">
      <div style="background-color:black;">
        <Divider />
      </div>
      </Col>
      <Col span="2">*
      </Col>
    </Row>

    <center>
     <Form ref="formValidate" :model="formValidate" :rules="ruleValidate" :label-width="80">
        <FormItem label="姓名" prop="name" class = "name">
            <Input v-model="formValidate.name" placeholder="请输入姓名"></Input>
        </FormItem>    
        <FormItem label="邮箱" prop="mail" class = "mail">
            <Input v-model="formValidate.mail" placeholder="请输入邮箱"></Input>
        </FormItem>
          <FormItem label="联系方式" prop="phone" class = "phone">
            <Input v-model="formValidate.phone" placeholder="请输入联系方式"></Input>
        </FormItem>
         <FormItem label="通信地址" prop="address" class = "address">
            <Input v-model="formValidate.address" placeholder="请输入通信地址"></Input>
        </FormItem>
         <FormItem label="研究方向" prop="study" class = "study">
            <Input v-model="formValidate.study" placeholder="请输入你的研究方向"></Input>
        </FormItem>
        <FormItem label="职称" prop="job" class = "job">
            <Select v-model="formValidate.city" placeholder="请选择你的职称">
                <Option value="教授">教授</Option>
                <Option value="副教授">副教授</Option>
                <Option value="讲师">讲师</Option>
            </Select>
        </FormItem>
       
        <FormItem label="次序" prop="sort" class = "sort">
            <Input v-model="formValidate.sort" placeholder="请输入次序"></Input>
        </FormItem>
    </Form>
    </center>

        <div class = "gender">
          <label style="padding-right: 1%">性别</label>
            <RadioGroup v-model="formValidate.gender">
                <Radio label="男">男</Radio>
                <Radio label="女">女</Radio>
            </RadioGroup>
        </div>
       
        <div class = "date">
          <label style = "padding-right: 0.5%">出生年月</label>
             <DatePicker type="date" placeholder="选择出生日期" style="width: 200px"></DatePicker><br>
        </div>

    <label  class = "photo">请上传照片：</label>
    <!-- 上传图片的组件 -->
     <upload-picture class = "upload"></upload-picture>


    <!-- 富文本编辑器的组件 -->
    <Row>
      <Col span="24">
      <div ref="editor"
           style="text-align:left"></div>
      </Col>
    </Row>
        
    

    <Button v-on:click="getContent"
            type="primary"
            style="font-size: 20px;">发布文章</Button>
    <Button @click="editorClean"
            type="primary"
            style="font-size: 20px;">清空内容</Button>
    <!--     <Button @click="addContent"
            type="primary"
            style="font-size: 20px;">追加内容</Button> -->
  </div>
</template>

<script>
import UploadPicture from "@/components/UploadPicture";
import E from "wangeditor";
import qs from "qs";
export default {
  // name: "editor",
  components: {
    UploadPicture
  },
  data() {
    return {
      editor: {},
      editorContent: "",
      editorHtmlContent: "",
      formValidate: {
                    name: '',
                    mail: '',
                    job: '',
                    faculty: '',
                    phone: '',
                    gender: '',
                    address: '',
                    date: '',
                    study: '',
                    sort: ''
                },
       ruleValidate: {
                    name: [
                        { required: true, message: '姓名不能为空！', trigger: 'blur' }
                    ],
                    mail: [
                        { required: true, message: '邮箱不能为空！', trigger: 'blur' },
                        { type: 'email', message: '邮箱格式错误！', trigger: 'blur' }
                    ],
                    job: [
                        { required: true, message: '请选择职称！', trigger: 'change' }
                    ],
                    phone: [
                        { required: true, message: '联系方式不能为空！', trigger: 'blur' }
                    ],
                    address: [
                        { required: true, message: '通信地址不能为空！', trigger: 'blur' }
                    ],
                    study: [
                        { required: false, message: '研究方向不能为空！', trigger: 'blur' }
                    ],
                    sort: [
                        { required: true, message: '请填写次序！', trigger: 'change' }
                    ],
                }
    };
  },
  methods: {

    getContent: function() {
      this.sendText();
    },
    sendText: function() {
      let url = "http://223.2.197.91/fileUpload/upload/files";
      this.$axios
        .post(
          url,
          {
            html: this.editorHtmlContent,
          },
         
        )
        .then(response => {
          console.log(response);
         
        })
        .catch(error => {
          console.log(error);
        });
    },

    editorClean: function() {

      this.editor.txt.html("<p></p>");

    }
          
  },
  //声明周期函数中的一个，可以在vue.js官网上找到
  mounted() {

    //这边写的，是wangeditor的内容
    var editor = new E(this.$refs.editor);
    // 通过 url 参数配置 debug 模式。url 中带有 wangeditor_debug_mode=1 才会开启 debug 模式
    editor.customConfig.debug = location.href.indexOf('wangeditor_debug_mode=1') > 0
    // 下面两个配置，使用其中一个即可显示“上传图片”的tab。但是两者不要同时使用！！！
    editor.customConfig.uploadImgShowBase64 = true; // 使用 base64 保存图片
    // editor.customConfig.uploadImgServer =
    //   "http://localhost:8080/FileUploadAndDownLoad/servlet/UploadHandleServlet"; // 上传图片到服务器
    editor.customConfig.uploadImgHeaders = {
      Accept: "text/x-json"
    };
    editor.customConfig.onchange = text => {
      //var jsonStr = JSON.stringify(editor.txt.text());
      this.editorHtmlContent = editor.txt.html();
    };
    editor.create();
    this.editor = editor;

   
  }
};
</script>

<style scoped>
* {
}
.base_editor {
  width: 99%;
  background-color: rgba(224, 222, 170, 0.5);
  margin-bottom: 80px;
}
.header {
  font-size: 50px;
  color: #464c5b;
}
.name{
  width: 40%;
}
.mail{
  width: 40%;
}
.phone{
  width: 40%;
}
.address{
  width: 40%;
}
.study{
  width: 40%;
}
.job{
  width: 40%;
}
.sort{
  width: 40%;
}
.gender{
  padding-right: 21%;
}
.date{
  padding-right: 19%;
  padding-top: 1.5%;
  padding-bottom: 1.5%;
}
.photo{
  font-size: 13px;
  padding-right: 33%;
}
.upload{
  padding-right: 22%;
}
</style>
